<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        p {
            color: red;
        }
        div {
            color: green;
        }
    </style> -->
    <!-- <style>
        .box {
            width: 200px;
            height: 100px;
        }
        .aaa {
            color: red;
        }
        .bbb {
            color: green;
        }
        .ccc {
            color: blue;
        }
    </style> -->
    <!-- <style>
        #hhh {
            color:aqua
        }
    </style> -->
    <!-- <style>
        * {
            color: red;
        }
    </style> -->
    <!-- <style>
        ul li a{
            color: red
        }
    </style> -->
    <!-- <style>
        .aaa a {
            color: red
        }
    </style> -->

    <!-- <style>
        div, h3 {
            color: red;
        }
    </style> -->

    <!-- <style>
        a:link {
            color: black;
        }

        a:visited {
            color: green;
        }

        a:hover {
            color: red;
        }

        a:active {
            color: blue;
        }
    </style> -->

    <!-- <style>
        .three>input:focus {
            color: red;
        }
    </style> -->
    <!-- <style>
        p {
            font-family: '宋体';
        }
    </style> -->
    <!-- <style>
        body {
            font-size: 40px;
        }
    </style> -->
    <!-- <style>
        p {
            font-weight: 200;
        }
    </style> -->
    <!-- <style>
        p {
            font-style: italic;
        }
    </style> -->
    <!-- <style>
        p {
            color: red;
            /* color: #f00;
            color: rgb(255,0,0) */
        }
    </style> -->
    <!-- <style>
        p {
            text-align: right;
        }
    </style> -->
    <!-- <style>
        .aaa {
            text-decoration: underline;
        }
        .bbb {
            text-decoration: none;
        }
        .ccc {
            text-decoration: overline;
        }
        .ddd {
            text-decoration: line-through;
        }
    </style> -->

    <!-- <style>
        .aaa {
            text-indent: 2px;
        }
        .bbb {
            text-indent: 15em;
        }
    </style> -->

    <!-- <style>
        .line-height .one {
            line-height: 40px;
            font-size: 16px;
        }
    </style> -->

    <!-- <style>
        .aaa {
            height: 100px;
            line-height: 100px;
        }
    </style> -->

    <!-- <style>
        .aaa {
            background-color: red;
        }
        .bbb {
            background-color: #0f0;
        }
        .ccc {
            background-color: transparent;
        }
    </style> -->

    <!-- <style>
        .bgc {
            height: 2000px;
            width: 2000px;
            background-image: url(bear.jpg);
            background-repeat: repeat-y;
        }
    </style> -->

    <!-- <style>
        .bgc {
            height: 750px;
            width: 1500px;
            background-image: url(bear.jpg);
            background-repeat: no-repeat;
            background-position: left;
        }
    </style> -->

    <!-- <style>
        .bgc {
            width: 1500px;
            height: 750px;
            background-image: url(bear.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            }
    </style> -->

    <!-- <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid red;
            border-radius: 10px;
        }
    </style> -->

    <!-- <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid green;
            border-radius: 10px 20px 30px 40px;
        }
    </style> -->

    <!-- <style>
        .demo1 .parent {
            width: 500px;
            height: 500px;
            background-color: green;
        }
        .demo1 .child {
            /* 不写 width, 默认和父元素一样宽 */
            /* 不写 height, 默认为 0 (看不到了) */
            height: 200px;
            background-color: red;
        }
    </style> -->

    <!-- <style>
        span {
            width: 250px;
            height: 250px;
            background-color: red;
        }
    </style> -->

    <!-- <style>
        .aaa {
            width: 150px;
            height: 50px;
            border-width: 2px;
            border-style: solid;
            border-color: red;
        }
        .bbb {
            width: 150px;
            height: 50px;
            border-width: 2px;
            border-style: dashed;
            border-color: red;
        }
        .ccc {
            width: 150px;
            height: 50px;
            border-width: 2px;
            border-style: dotted;
            border-color: red;
        }
    </style> -->
    <!-- <style>
        div {
            width: 100px;
            height: 50px;
            /* display: flex;
            align-items: center;
            justify-content: center; */
            border-top: 2px solid red;
            border-right: 2px dashed blue;
            border-bottom: 2px solid green;
            border-left: 2px dotted purple
        }
    </style> -->

    <!-- <style>
        div {
            width: 100px;
            height: 50px;
            padding-top: 20px;
            padding-right: 45px;
            padding-bottom: 20px;
            padding-left: 45px;
            box-sizing: border-box;
        }
    </style> -->

    <!-- <style>
        div {
            width: 100px;
            height: 50px;
            margin: auto;
        }
    </style> -->
</head>
<body>
    <!-- <p>Java</p>
    <p>Java</p>
    <p>Java</p>
    <div>C++</div>
    <div>C++</div>
    <div>C++</div> -->

    <!-- <div class="box aaa">HTML</div>
    <div class="box bbb">CSS</div>
    <div class="box ccc">JavaScript</div> -->

    <!-- <div id="hhh">CSS</div> -->
    <!-- <p>HTML</p>
    <p>HTML</p>
    <p>HTML</p>
    <div>CSS</div>
    <div>CSS</div>
    <div>CSS</div>
    <span>JavaScript</span>
    <span>JavaScript</span>
    <span>JavaScript</span> -->

    <!-- <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>
            <a href="#">点击跳转</a>
        </li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol> -->

    <!-- <div class="aaa">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div> -->

    <!-- <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul> -->

    <!-- <a href="#">小猫</a>
    <a href="#">小狗</a> -->

    <!-- <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div> -->
    <!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid quaerat exercitationem a fuga! Maxime pariatur alias at facilis, illo placeat cum animi possimus deserunt nulla totam similique, suscipit nam quaerat.</p> -->
    <!-- <p>你好</p> -->

    <!-- <div class="test-decoration">
        <div class="aaa">你好</div>
        <div class="bbb">你好</div>
        <div class="ccc">你好</div>
        <div class="ddd">你好</div>
    </div> -->
    <!-- <div class="test-decoration">
        <div class="aaa">你好</div>
        <div class="bbb">你好</div>
    </div> -->

    <!-- <div class="line-height">
        <div>
            上一行
        </div>
        <div class="one">
            中间行
        </div>
        <div>
            下一行
        </div>
    </div> -->

    <!-- <div class="line-height">
        <div class="aaa">
            文本垂直居中
        </div>
    </div> -->

    <!-- <div class="bgc">
        <div class="aaa">背景1</div>
        <div class="bbb">背景2</div>
        <div class="ccc">背景3</div>
    </div> -->

    <!-- <div></div> -->

    <!-- <div class="demo1">
        <div class="parent">
            <div class="child">
                child1
            </div>
            <div class="child">
                child2
            </div>
        </div>
    </div> -->

    <!-- <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
    </div> -->


    <!-- <div class="aaa">你好1</div>
    <div class="bbb">你好2</div>
    <div class="ccc">你好3</div> -->

    <!-- <div>你好</div>
    <div>世界</div> -->

    <div>
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
    </div>
    <style>
        div {
            width: 500px;
            height: 250px;
            background-color: green;
            display: flex;
            justify-content: space-around;
            align-items: stretch;
        }
        span {
            width: 100px;
            height: 50px;
            background-color: red;
        }
    </style>
</body>
</html>